@keyframes turn2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes prizequanani2 {
  0% {
    filter: drop-shadow(0 0 2px #ff0000) drop-shadow(5px 5px 15px #f9cd46);
  }
  50% {
  filter: drop-shadow(0 0 0px #ff0000);
  }
  100% {
  filter: drop-shadow(0 0 2px #ff0000) drop-shadow(5px 5px 15px #f9cd46);
  }
}

.back-panel {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  video {
    object-fit: fill;
    height: 100%;
    width: 100%;
  }
}

.index-main {
  text-align: center;
  padding-top: 5vh;
  .title-img-wrapper {
    text-align: center;
  }
  .prize-list {
    text-align: center;
    margin-top: -12vh;
    .item-name {
        color: #fffea0;
        font-size: 50px;
        text-shadow: rgb(243 85 0) 1px 1px 20px, rgb(247 134 9) 0px 1px 20px, rgb(243 139 32) 1px 0px 20px, rgb(243 236 39 / 91%) 1px 1px 30px;
    }
  }
  .prize-wrapper {
    margin: auto;
    width: 600px;
    height: 600px;
    border-radius: 500px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: prizequanani2 2s linear infinite;
    filter: drop-shadow(0 0 1px #ff0000) drop-shadow(5px 5px 10px #f9cd46);
    position: relative;
    .img-back {
      width: 100%;
      height: 100%;
      background-image: url('../../assets/image/quan.png');
      background-repeat: no-repeat;
      background-size: 100%;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      animation: turn2 6s linear infinite;
    }
    img {
      max-width: 50%;
      border-radius: 500px;
      position: absolute;
    }
  }
  .btn-wrapper {
    text-align: center;
  }
}
.flex-panel {
  text-shadow: 1px 1px 0px #00000080;
  .ant-input-number-group-addon {
    color: rgb(214, 211, 209);
  }
  .ant-input-number-input-wrap {
    background-color: rgb(214, 211, 209);
    width: 35px;
    input[type="number"] {
      -moz-appearance: textfield;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
      margin: 0;
    }
  }
}
.lotter-main {
  position: relative;
  z-index: 10;
  .number-list {
    margin: auto;
    margin-top: 40vh;
    border: 5px solid #e7e7e7;
    width: 90vw;
    padding: 60px 20px;
    border-radius: 20px;
    column-gap: 20px;
    background: rgba(0, 0, 0, 0.098);
    p {
      background: url("../../assets/image/border-img.png") no-repeat;
      background-size: 100% 100%;
      height: 150px;
      width: 400px;
      text-align: center;
      padding-top: 45px;
      font-size: 30px;
      font-weight: bold;
      color: rgb(255, 248, 184);
      text-shadow: rgb(255, 129, 1) 0px 1px, rgb(255, 129, 1) 0px 2px, rgb(255, 129, 1) 0px 3px, rgb(255, 129, 1) 0px 5px, rgba(255, 0, 0, 0.65) 0px 10px 10px, rgba(255, 0, 0, 0.65) 0px 0px 10px, rgba(255, 0, 0, 0.65) 0px 0px 15px, rgba(255, 0, 0, 0.65) 0px 0px 20px;
    }
  }
}

#container {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
  .number-ele {
    color: rgb(255, 248, 184);
    font-size: 40px;
    letter-spacing: 2px;
    text-shadow: rgb(255, 129, 1) 0px 1px, rgb(255, 129, 1) 0px 2px, rgb(255, 129, 1) 0px 3px, rgb(255, 129, 1) 0px 5px, rgba(255, 0, 0, 0.65) 0px 10px 10px, rgba(255, 0, 0, 0.65) 0px 0px 10px, rgba(255, 0, 0, 0.65) 0px 0px 15px, rgba(255, 0, 0, 0.65) 0px 0px 20px;
    width: 200px;
    word-wrap: break-word;
    opacity: 0.6;
  }
}
